<template>
	<div>
		<div class='text-center bg-white'>
			<div class='produ_proper'>
				<span :class='{active:currentNav==1}' @click='tabProduct_Property(1)'>在售产品</span>
				<span :class='{active:currentNav==2}' @click='tabProduct_Property(2)'>推荐资产</span>
			</div>
	    	<a-tabs v-if='currentNav==1' v-model='product_type'  class='property_change_tab' :tabBarStyle='{marginBottom:0}' @change='(val)=>changeProduct_type(val)' :animated='false'>
		    	<a-tab-pane tab="地产类" key="1"></a-tab-pane>
		    	<a-tab-pane tab="政信类" key="2"></a-tab-pane>
	    	</a-tabs>
	    	<a-tabs v-if='currentNav==2' v-model='property_type' :tabBarGutter='0' class='property_change_tab' :tabBarStyle='{marginBottom:0}'  @change='(val)=>changeProperty_type(val)' :animated='false'>
		    	<a-tab-pane tab="直接融资类" key="1"></a-tab-pane>
		    	<a-tab-pane tab="商票资产类" key="2"></a-tab-pane>
		    	<a-tab-pane tab="应收账款类" key="3"></a-tab-pane>
		    	<a-tab-pane tab=" 其 他 类 " key="4"></a-tab-pane>
	    	</a-tabs>
    	</div>
    	<dl class=''>  
			<dd v-if='currentNav==1' class='contain-main  mt5 bg-white' v-for='(item,index) in productData'>
				<router-link :to='{path:"/productDetail",query:{code:item.code}}'>
					<div class='_title'>{{item.name}}</div>
					<ul class='table_div'>
						<li> <span class='color-yellow'>{{item.size | Num_splitby_thresscomma}}</span> <br> <span class='ft12 color-999'>规模（万）</span> </li>
						<li> <span class='color-yellow'>{{item.startingAmt | Num_splitby_thresscomma}}</span>          <br> <span class='ft12 color-999'>起投金额（万）</span> </li>
						<li> <span class='ft12'>{{item.type | productType}}</span>    								 <br> <span class='ft12 color-999'>产品类型 </span> </li>
						<li> <span class='ft12'>{{item.financingSubjectNature |financingSubjectNature}}</span>                                   		 <br> <span class='ft12 color-999'>融资主体性质</span> </li> 
					</ul>
				</router-link>
			</dd> 
			<dd v-if='currentNav==2' class='contain-main  mt5 bg-white' v-for='(item,index) in propertyData'>
				<router-link :to='{path:"/propertyDetail",query:{code:item.code}}'>
					<div class='_title'>{{item.name}}</div>
					<ul class='table_div'>
						<li> <span class='color-yellow'>{{item.prjSize | Num_splitby_thresscomma}}</span> <br> <span class='ft12 color-999'>规模（万）</span> </li>
						<li> <span class='color-yellow ft12'>{{item.type | propertyType}}</span>          <br> <span class='ft12 color-999'>资产类型</span> </li>
						<li> <span class='ft12'>{{item.issuer}}</span>  								  <br> <span class='ft12 color-999'>发行方 </span> </li>
						<li> <span class='ft12'>{{item.subsistingCycle}}个月</span>                                   		 <br> <span class='ft12 color-999'>存续周期</span> </li> 
					</ul>
				</router-link>
			</dd> 
		</dl>
		<div class='data_tip'>
			<span  v-if='hasNextPage' @click='getNextData()'>点击加载更多</span>
		    <span  v-else>
		    	<span v-if='dataNum>10'>暂无更多数据</span>
		    </span>
		</div>    
	</div>
</template>

<script >
	import { productList,getPropertyList }  from  '@/api/home/index'
	export default{
		name:'product',
		data(){
			return{
				currentNav:'1',

				product_type:'1',
				productData:[], 

				property_type:'1',
				propertyData:[],

				hasNextPage:false,
				dataNum:null,
				search_pageNo:1,
			}
		},
		created(){
			let num = this.$route.hash.slice(1) || 1
			console.log(num)
			if(num == 1){
				this.productInit()
			}
			if(num == 2){
				this.currentNav = num
				this.propertyInit()
			}
			
		},
		methods:{
			productInit(){
				this.spinning = true  
	  	 		productList({type:this.product_type,pageNo:this.search_pageNo}).then((res)=>{
	  	 			if(res.data.flag == true){ 
	  	 				if(res.data.pageNo>1){
							this.productData = this.productData.concat(res.data.dataList)
						}
						else{
							this.productData = res.data.dataList
							this.dataNum = res.data.totalRs
						}
						this.hasNextPage = res.data.hasNext
	  	 			} 
	  	 		})  
			},
			propertyInit(){
				getPropertyList({type:this.property_type,pageNo:this.search_pageNo}).then((res)=>{
					if(res.data.flag == true){
						if(res.data.pageNo>1){
							this.propertyData = this.propertyData.concat(res.data.dataList)
						}
						else{
							this.propertyData = res.data.dataList
							this.dataNum = res.data.totalRs
						}
						this.hasNextPage = res.data.hasNext
					}
				})
			},
			getNextData(){
				this.search_pageNo+=1
				if(this.currentNav==1){
					this.productInit()
				}
				if(this.currentNav==2){
					this.propertyInit()
				}
			},
			tabProduct_Property(num){
				this.currentNav = num
				this.search_pageNo = 1
				if(num=='1'){
					this.productInit()
				}
				if(num == '2'){
					this.propertyInit()
				}
			},
			changeProduct_type(val){
				this.search_pageNo = 1
				this.productInit()
			},
			changeProperty_type(val){
				this.search_pageNo = 1
				this.propertyInit()
			}
		},
		watch:{
			
		}

	}
</script>

<style scoped="scoped">
	

	.produ_proper{display: inline-block; border:1px solid #1E49A5;border-radius: 0.14rem;background-color: #fff;margin:0.15rem auto;}
	.produ_proper span{display: inline-block; padding: 0.05rem 0.33rem;}
	.produ_proper span.active{background-color: #1E49A5;color: #fff;border-radius: 0.14rem;}
</style>